<template>
	<view class="cardItem">
		<image :src="avatar|completeUrl" class="cardImg" mode="aspectFit" lazy-load :lazy-load-margin='0'
			:style="{height:`${cardHeight}rpx`,width:`${cardWidth}rpx`}"></image>
		<view class="itemBox">
			<view class="itemLeft">
				<view class="itemInfo">
					<view class="title">
						{{title}}
						<slot name="titleTip"></slot>
					</view>
					<view class="price">
						<slot name="priceTip"></slot>
						<view class="priceTxt">
							<text class="unit">￥</text>
							{{price}}
						</view>
					</view>
				</view>
			</view>
			<view class="itemRight">
				<slot name="itemRightBox"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cardListItem",
		props: {
			avatar: {
				type: String,
				default: () => {
					return ''
				}
			},
			title: {
				type: String,
				default: () => {
					return ''
				}
			},
			price: {
				type: Number,
				default: () => {
					return 0
				}
			},
			cardWidth: {
				type: Number,
				default: () => {
					return 102
				}
			},
			cardHeight: {
				type: Number,
				default: () => {
					return 102
				}
			},
			titleColor: {
				type: String,
				default: () => {
					return "#000000"
				}
			},
			tagWidth: {
				type: Number,
				default: () => {
					return 72
				}
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.cardItem {
		@include flexLayout(flex-start);

		.cardImg {
			border-radius: 20upx;
			background-color: #F2F2F2;
		}

		.itemBox {
			border-bottom: 2upx solid #F0F0F0;
					margin-left: 20upx;
				flex: 1 1;
padding-bottom: 22upx;
padding-top: 6upx;
				@include flexLayout(center, space-between);
			.itemLeft {
				@include flexLayout(center, space-between);


				.itemInfo {

					.title {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: 500;
						font-size: 30rpx;
						color: #454545;
						line-height: 40rpx;
						// margin-bottom: 12upx;
					}

					.price {
						@include flexLayout(center, space-between);

						.priceTxt {
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: 800;
							font-size: 32rpx;
							color: #F1516D;
							line-height: 46rpx;
						}

						.unit {
							font-size: 26rpx;
						}
					}
				}
			}

			.itemRight {}
		}
	}
</style>